<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/static/commons/taglibs.jsp"%>
<%@ include file="/static/commons/meta.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<title>${title }</title>
	<!--自定义index样式-->
	<link rel="stylesheet" href="${ctx }/static/styles/basic/basic.css"/>
	<link rel="stylesheet" href="${ctx }/static/styles/edit/box.css"/>
	<!--js库-->
	<%@ include file="/static/commons/jquery-easyui.jsp" %>
	<script type="text/javascript" src="${ctx}/static/scripts/set_select.js"></script>
	<style type="text/css">
		.ltr {
			margin: 10px 20px;
			height: 100%;
			overflow: hidden;
		}
		.ltr-header {
			height: 50px;
			width: 100%;
			border-bottom: 2px #eee ridge;
   			margin-bottom: 20px;
   			padding: 0px 30px;
		    height: 40px;
		    line-height: 40px;
		}
		
		.ltr-body {
			width: 100%;
		    overflow: hidden;
		    height: 430px;
		    text-align: center;
		}
		.ltr-body div{
			height: 400px;
		    width: 300px;
		    font-size: 13px;
	        display: inline-block;
	        border: 1px solid #74777B;
	        padding-bottom: 1px;
		}
		.ltr-body .d-m{
			width:36px;
			padding: 0px 10px;
			border: none;
		}
		
		.ltr-body .d-m button{
			width: 36px;
			display: block;
			margin-top: 10px;
			background: #f7f7f7;
			color: #74777b;
		    cursor: pointer;
		    padding: 3px;
		    border-width: 1px;
		    float: left;
		}
		.ltr-body  .d-m button:first-child{margin-top: 135px;}
		
		.ltr-body div p{
			height: 30px;
			line-height: 30px;
			padding: 0px 20px;
			text-align: left;
			border-bottom: 1px solid #eee;
		}
		.ltr-body div p button{
			background: #f7f7f7;
			color: #74777b;
		    cursor: pointer;
		    padding: 3px;
		    border-width: 1px;
		    width: 60px;
		    float: right;
	        margin: 3px 0px 0px 10px;
		}
		.ltr-body dl{
			color: #74777b;
			overflow: hidden;
   			overflow-y: auto;
		 	height: 370px;
		    width: 100%;
		}
		.ltr-body dl dd{
		    padding: 6px;
		    word-break: break-all;
   			word-wrap: break-word;
   			cursor: pointer;
   			text-align: left;
		}
		.ltr-body dl dd.s0, .ltr-body div button:active{
		    color: #fff;
			background-color: #2CC185;
		}
		.hide{display: none;}
	</style>
  </head>
  
  <body style="padding-bottom:8px;">
  		<c:set var="disabled" value=""></c:set>
  		<c:set var="ifSelect" value=""></c:set>
  		<c:if test="${not empty view}">
  			<c:set var="disabled" value="disabled"></c:set>
  			<c:set var="ifSelect" value="false"></c:set>
  		</c:if>
  		<form id="editForm" action="${ctx}/deviceInfo/save" method="post">
  			<div class="ltr">
				<div class="ltr-header">
					姓名：王春林
				</div>
				
				<div class="ltr-body">
					<div class="d-l">
						<p><label>可选项：</label></p>
						<dl id="dll">
							<dd id="1" class="s0">11111</dd>
							<dd id="2">2222</dd>
							<dd id="3">3333</dd>
							<dd id="4">4444</dd>
							<dd id="5">5555</dd>
							<dd id="6">6666</dd>
							<dd id="7">7777</dd>
							<dd id="8">8888</dd>
							<dd id="9">9999</dd>
							<dd id="0">0000</dd>
							<dd id="a">aaaa</dd>
							<dd id="b">bbbb</dd>
							<dd id="c">cccc</dd>
							<dd id="d">dddd</dd>
							<dd id="e">eeee</dd>
							<dd id="f">ffff</dd>
							<dd id="g">gggg</dd>
						</dl>
					</div>
					<div class="d-m">
						<button id="dbgt">&gt;&gt;</button>
						<button id="gt">&gt;</button>
						<button id="lt">&lt;</button>
						<button id="dblt">&lt;&lt;</button>
					</div>
					<div class="d-r">
						<p>
							<label>已选项：</label>
							<button id="up">上移</button>
							<button id="down">下移</button>
						</p>
						<dl id="dlr"></dl>
					</div>
				</div>
			</div>
        </form>
  	</body>
  	<script type="text/javascript">
		$(function(){
			
			//
			$('.ltr-body').on('click', 'dl dd', function(){
				$(this).toggleClass('s0');
			}).on('click', 'div button', function(){
				var id = this.id;
				switch(id){
				case 'dbgt':
					$('#dll dd').removeClass('s0').addClass('hide');
					$('#dlr dd').remove();
					$('#dlr').append($('#dll').html()).find('dd.hide').removeClass('hide');
					break;
				case 'gt':
					var dd = $('#dll dd.s0');
					if(dd.length==0){
						alert('请选择');
					}else{
						$('#dlr').append(dd.clone().removeClass('s0'));
						dd.removeClass('s0').addClass('hide');
					}
					break;
				case 'lt':
					var dd = $('#dlr dd.s0');
					if(dd.length==0){
						alert('请选择');
					}else{
						for(var i=0; i<dd.length; i++){
							var id = dd[i].id;
							dd.remove();
							$('#dll #'+id).removeClass('hide');
						}
					}
					break;
				case 'dblt':
					$('#dll dd').removeClass('hide').first().addClass('s0');
					$('#dlr dd').remove();
					break;
				}
			}).on('click', '.d-r button', function(){
				var dd = $('#dlr dd.s0');
				if(dd.length==0){
					alert('请选择');
				}else if(dd.length>1){
					alert('请选择一条');
				}else{
					var id = this.id;
					if(id=='up'){
						$(dd).prev().before(dd);
					}else{
						$(dd).next().after(dd);
					}
				}
			});
				
		});
	</script>
</html>